<template>
  <div
    class="admin-wrapper w-screen h-screen bg-[#f0f2f5]"
    :class="[
      pageStyle,
      menus.collapsed ? 'collapsed' : '',
      navStyle === 'top' ? 'no-silde' : '',
    ]"
  >
  <link  rel="stylesheet" type="text/css" href="/editor.md/css/editormd.min.css" ></link>
    <script src="/jquery/jquery.min.js" defer></script>
    <script src="/editor.md/editormd.min.js" defer></script>
    <!-- 后台管理系统布局 -->
    <div class="header-wrapper">
      <layouts-admin-nav />
    </div>
    <div v-if="navStyle !== 'top'" class="slide-wrapper">
      <layouts-admin-slide />
    </div>
    <div class="main-wrapper"><nuxt /></div>
    <!--  -->
  </div>
</template>

<script>
export default {
  computed: {
    menus() {
      return this.$store.state.admin.menus
    },
    navStyle() {
      return this.$store.state.admin.navStyle
    },
    pageStyle() {
      return this.$store.state.admin.pageStyle
    },
  },
}
</script>

<style lang="scss" scoped>
//
.admin-wrapper {
  display: grid;
  grid-template-columns: 220px 1fr; // 2列
  grid-template-rows: 64px 1fr; // 2行
  grid-template-areas:
    'Slide Header'
    'Slide Main';
  // transition: all 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
  > div {
    &.header-wrapper {
      grid-area: Header; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
    }
    &.slide-wrapper {
      grid-area: Slide; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
      background-color: #001529;
      transition: all 0.3s;
    }
    &.main-wrapper {
      grid-area: Main; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
      // background-color: green;
    }
  }
  &.collapsed {
    grid-template-columns: 80px 1fr; // 2列
  }
  &.no-silde {
    display: grid;
    grid-template-areas:
      'Header Header'
      'Main Main';
    .main-wrapper {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
    }
    .slide-wrapper {
      display: none;
    }
  }
  &.white {
    > div {
      &.slide-wrapper {
        grid-area: Slide; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
        background-color: #ffffff;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
        z-index: 1;
        position: relative;
      }
    }
  }
}
</style>
